﻿<%@ Page Title="<%$Resources:PageTitle %>" Language="C#" MasterPageFile="~/MasterPages/Core.Master"
    AutoEventWireup="true" CodeBehind="UsersList.aspx.cs" Inherits="Pap.Web.Modules.Membership.Views.UsersList" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <script type="text/javascript">
        function ConfirmDeletion() {
            Ext.Msg.confirm('<asp:Literal runat="server" Text="<%$ Resources:MBConfirm%>" />', '<asp:Literal runat="server" Text="<%$ Resources:MBSureDelete %>" />', DeleteConfirmed);
        }

        function btnDeleteSelected_Clicked() {
            if (Ext.getCmp('gvUsers').hasSelection()) {
                ConfirmDeletion();
            }
        }

        function DeleteConfirmed(btn) {
            if (btn == "yes")
                Pap.DeleteSelectedUsers();
        }

        function GridRefreshed() {
            Ext.getCmp('txtDisplayName').reset();
            Ext.getCmp('txtJobTitle').reset();
            Ext.getCmp('txtEmail').reset();
            Ext.getCmp('dtpBirthDate').reset();
        }

        var ApplyFilter = function(store) {
            store.filterBy(getRecordFilter());
        }

        var filterString = function(value, dataIndex, record) {
            var val = record.get(dataIndex);
            if (typeof val != "string") {
                return true;
            }
            if (value.length == 0) {
                return value.length == 0;
            }
            return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
        }

        var filterDate = function(value, dataIndex, record) {
            var val = record.get(dataIndex).clearTime(true).getTime();

            if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
                return false;
            }
            return true;
        }

        var filterNumber = function(value, dataIndex, record) {
            var val = record.get(dataIndex);

            if (!Ext.isEmpty(value, false) && val != value) {
                return false;
            }
            return true;
        }

        var getRecordFilter = function() {
            var f = [];

            f.push({
                filter: function(record) {
                    return filterString(Ext.getCmp('txtDisplayName').getValue(), 'DisplayName', record);
                }
            });

            f.push({
                filter: function(record) {
                    return filterString(Ext.getCmp('txtJobTitle').getValue(), 'JobTitle', record);
                }
            });

            f.push({
                filter: function(record) {
                    return filterString(Ext.getCmp('txtEmail').getValue(), 'Email', record);
                }
            });

            f.push({
                filter: function(record) {
                    return filterDate(Ext.getCmp('dtpBirthDate').getValue(), 'Birthdate', record);
                }
            });

            var len = f.length;
            return function(record) {
                for (var i = 0; i < len; i++) {
                    if (!f[i].filter(record)) {
                        return false;
                    }
                }
                return true
            };
        }
    </script>

    <ext:FitLayout runat="server">
        <ext:FormPanel ID="MainForm" runat="server" Frame="false" Border="false" IDMode="Static">
            <Body>
                <ext:Store ID="UsersStore" runat="server" AutoLoad="True" meta:resourcekey="UsersStoreResource1"
                    SerializationMode="Simple" IDMode="Static">
                    <Reader>
                        <ext:JsonReader ReaderID="UserID">
                            <Fields>
                                <ext:RecordField Name="UserID" />
                                <ext:RecordField Name="Username" />
                                <ext:RecordField Name="Password" />
                                <ext:RecordField Name="DisplayName" />
                                <ext:RecordField Name="Birthdate" Type="Date" />
                                <ext:RecordField Name="JobTitle" />
                                <ext:RecordField Name="Email" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
                <ext:FitLayout runat="server">
                    <ext:GridPanel ID="gvUsers" runat="server" StoreID="UsersStore" Title="Users List"
                        TrackMouseOver="True" StripeRows="True" meta:resourcekey="gvUsersResource1" SelectionSavingBuffer="10"
                        IDMode="Static" AutoWidth="true">
                        <ColumnModel>
                            <Columns>
                                <ext:Column Header="<%$ Resources:HeaderDisplayName %>" Sortable="True" DataIndex="DisplayName" />
                                <ext:Column Header="<%$ Resources:HeaderBirthdate %>" Sortable="True" DataIndex="Birthdate">
                                    <Renderer Fn="Ext.util.Format.dateRenderer('d/m/Y')" />
                                </ext:Column>
                                <ext:Column Header="<%$ Resources:HeaderJobTitle %>" Sortable="True" DataIndex="JobTitle" />
                                <ext:Column Header="<%$ Resources:HeaderEmail %>" Sortable="True" DataIndex="Email" Width="200" />
                                <ext:CommandColumn Width="30px" Align="Center" Hideable="False" Sortable="True">
                                    <Commands>
                                        <ext:GridCommand Icon="NoteEdit" CommandName="Edit" IconCls="icon-noteedit">
                                            <ToolTip Text="<%$ Resources:CommandEditToolTip %>" />
                                        </ext:GridCommand>
                                    </Commands>
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView runat="server" meta:resourcekey="GridViewResource1" IDMode="Static">
                                <GetRowClass FormatHandler="False" Handler="" />
                                <HeaderRows>
                                    <ext:HeaderRow>
                                        <Columns>
                                            <ext:HeaderColumn />
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <ext:TextField ID="txtDisplayName" IDMode="Static" runat="server" EnableKeyEvents="True"
                                                        meta:resourcekey="txtDisplayNameResource1">
                                                        <Listeners>
                                                            <KeyUp Handler="ApplyFilter(#{UsersStore});" Buffer="250" />
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <ext:DateField ID="dtpBirthDate" IDMode="Static" runat="server" EnableKeyEvents="True"
                                                        meta:resourcekey="dtpBirthDateResource1" ReadOnly="true" Format="dd/MM/yy" SelectedDate="<%# DateTime.Now %>">
                                                        <Listeners>
                                                            <Select Handler="ApplyFilter(#{UsersStore});" />
                                                            <KeyUp Handler="ApplyFilter(#{UsersStore});" Buffer="250" />
                                                        </Listeners>
                                                    </ext:DateField>
                                                </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <ext:TextField ID="txtJobTitle" IDMode="Static" runat="server" EnableKeyEvents="True">
                                                        <Listeners>
                                                            <KeyUp Handler="ApplyFilter(#{UsersStore});" />
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Component>
                                            </ext:HeaderColumn>
                                            <ext:HeaderColumn>
                                                <Component>
                                                    <ext:TextField ID="txtEmail" IDMode="Static" runat="server" EnableKeyEvents="True">
                                                        <Listeners>
                                                            <KeyUp Handler="ApplyFilter(#{UsersStore});" Buffer="250" />
                                                        </Listeners>
                                                    </ext:TextField>
                                                </Component>
                                            </ext:HeaderColumn>
                                        </Columns>
                                    </ext:HeaderRow>
                                </HeaderRows>
                            </ext:GridView>
                        </View>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel runat="server">
                                <CustomConfig>
                                    <ext:ConfigItem Name="checkOnly" Value="true" Mode="Raw" Encode="False" />
                                </CustomConfig>
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>
                        <AjaxEvents>
                            <Command OnEvent="gvUsers_Command">
                                <ExtraParams>
                                    <ext:Parameter Name="CommandName" Value="command" Mode="Raw" Encode="False" />
                                    <ext:Parameter Name="ID" Value="record.data.UserID" Mode="Raw" Encode="False" />
                                </ExtraParams>
                            </Command>
                        </AjaxEvents>
                        <TopBar>
                            <ext:Toolbar runat="server" meta:resoureckey="ToolbarResource2">
                                <Items>
                                    <ext:Button runat="server" ID="btnDeleteSelected" Icon="Delete" meta:resourcekey="btnDeleteSelectedResource1">
                                        <Listeners>
                                            <Click Handler="btnDeleteSelected_Clicked()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <BottomBar>
                            <ext:PagingToolbar StoreID="UsersStore" runat="server" PageSize="15" DisplayInfo="True"
                                meta:resourcekey="PagingToolbarResource1">
                                <Listeners>
                                    <Change Handler="GridRefreshed()" />
                                </Listeners>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </ext:FitLayout>
            </Body>
        </ext:FormPanel>
    </ext:FitLayout>
</asp:Content>
